import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { ProTable, ProColumns } from '@ant-design/pro-components';
import { UserResourceTableItem } from '../types.d';
import { queryCompanies, queryUserResources } from '../service';

const ResourceList = () => {
  const columns: ProColumns<UserResourceTableItem>[] = [
    {
      title: 'id',
      dataIndex: '_id',
      hideInTable: true,
      hideInSearch: true,
    },
    {
      title: '企业名称',
      dataIndex: 'ownerId',
      align: 'center',
      fieldProps: { showSearch: true },
      render: (_, record) => record.ownerName,
      debounceTime: 300,
      request: (val) => queryCompanies(val.keyWords, false),
    },
    {
      title: '路段数量',
      dataIndex: 'parkingLot',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '泊位数量',
      dataIndex: 'parkingSpot',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '地磁数量',
      dataIndex: 'sensor',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '巡检车数量',
      dataIndex: 'patrolDevice',
      align: 'center',
      hideInSearch: true,
    },
  ];
  return (
    <PageHeaderWrapper
      header={{
        title: '',
        subTitle: '企业资源列表',
        breadcrumb: {
          routes: [
            {
              path: '/',
              breadcrumbName: '首页',
            },
            {
              path: '/system-user',
              breadcrumbName: '用户管理',
            },
            {
              path: '/system-user/resource',
              breadcrumbName: '企业资源',
            },
          ],
        },
      }}
    >
      <ProTable<UserResourceTableItem>
        rowKey="_id"
        style={{ whiteSpace: 'nowrap' }}
        search={{ labelWidth: 'auto' }}
        columns={columns}
        debounceTime={300}
        request={queryUserResources}
      />
    </PageHeaderWrapper>
  );
};

export default ResourceList;
